<template>
  <view class="patrolInspect-form-card">
    <view class="patrolInspect-form-card-title">隐患发起</view>
    <van-form class="created-form" @submit="onSubmit" :readonly="loading" label-width="160rpx" colon>
      <van-cell-group inset>
        <van-field
          name="checked" label="关联设备"
          placeholder="请选择关联设备"
          :rules="[{ required: false, message: '请选择关联设备' }]"
        >
          <template #input>
            <picker-multiple :columns="devicesList" @confirm="onDeviceConfirm"></picker-multiple>
          </template>
        </van-field>
        <van-field
          v-model="form.desc"
          rows="4" autosize required type="textarea"
          label="隐患描述"
          placeholder="请输入隐患描述"
          :rules="[{ required: true, message: '请上传维修前视频' }]"
        />
        <van-field
          name="uploader" required label="维修前照片"
          :rules="[{ required: true, message: '请上传维修前照片' }]"
        >
          <template #input>
            <upload-file accept="image/*" v-model="form.imageBefore" ></upload-file>
          </template>
        </van-field>
        <van-field
          name="uploader" label="维修前视频"
        >
          <template #input>
            <upload-file accept="video/*" v-model="form.videoBefore"></upload-file>
          </template>
        </van-field>
        <van-field
            name="checkboxGroup" required label="立即处置"
            :rules="[{ required: true, message: '请选择处置方式' }]"
          >
            <template #input>
              <van-radio-group v-model="dealStatus" direction="horizontal">
                <van-radio name="2">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
      </van-cell-group>
      <!-- 立即处置 -->
      <van-cell-group v-if="dealStatus === '2'" inset>
        <van-field
          v-model="form.repairResult"
          rows="4" autosize type="textarea"
          show-word-limit maxlength="200"
          label="处理方式及结果"
          placeholder="请输入处理方式及结果"
        />
        <van-field
          name="uploader" required label="处理后照片"
          :rules="[{ required: true, message: '请上传处理后照片' }]"
        >
          <template #input>
            <upload-file accept="image/*" v-model="form.imageAfter"></upload-file>
          </template>
        </van-field>
        <van-field
          name="uploader" label="处理后视频"
        >
          <template #input>
            <upload-file accept="video/*" v-model="form.videoAfter"></upload-file>
          </template>
        </van-field>
        <van-field
          v-model="form.auditerName"
          is-link readonly required
          name="picker"
          label="审核人"
          placeholder="请选择审核人"
          @click="selectShow.user = true"
          :rules="[{ required: true, message: '请选择审核人' }]"
        />
      </van-cell-group>

      <!-- 接收人 -->
      <van-cell-group v-if="dealStatus === '0'" inset>
        <van-field
          v-model="form.managerName"
          is-link readonly required
          name="picker"
          label="接收人"
          placeholder="请选择接收人"
          @click="selectShow.user = true"
          :rules="[{ required: true, message: '请选择接收人' }]"
        />
      </van-cell-group>
      <view class="patrolInspect-form-card-footer">
        <van-button 
          class="patrolInspect-form-card-footer-submit" type="primary" size="small" native-type="submit"
          :loading="loading" loading-text="提交中..."
        >提交巡查点</van-button>
      </view>
    </van-form>

    <!-- 选择器 接收人 -->
    <picker-search
      v-model:show="selectShow.user"
      :columns="assignedList"
      @confirm="onUserConfirm"
      @cancel="selectShow.user = false"
    ></picker-search>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { apiUsersList, apiDevicesList } from '@/api/common';

import store from '@/store'
const userInfo = store.getters.GET_USER_INFO.sysUser;

const emit = defineEmits(['confirm']);
const props = defineProps({
  detail: Object
});
const dealStatus = ref('2'); // 2-立即处置 0-不处置
const form = ref({
  imageBefore: [],// 维修前图片
  videoBefore: [],// 维修前视频
  imageAfter: [], // 处置后图片
  videoAfter: [], // 处置后视频
  relatedEquipment: [], // 设备
  desc: '',
  repairResult: '',
  assignedHandler: '',
  assignedHandlerName: '',
  manager: '',
  managerName: '',
});
const loading = ref(false);

const maxDate = new Date(2035, 1, 1);// 日历可选的最大值
const selectShow = ref({
  assigned: false,
  calendar: false,
  user: false,
});
const assignedList = ref([]);
let devicesList = ref([]);

const onSaveForm = () => {
  const params = initParam();
  emit('saveForm', params);
}
const onSubmit = () => {
  loading.value = true;
  const params = initParam();
  emit('confirm', params)
};
const initParam = () => {
  const { imageBefore, videoBefore, imageAfter, videoAfter }  = form.value;
  return {
    dealStatus: dealStatus.value,
    trouble: {
      ...form.value,
      picUrl: [...imageBefore, ...videoBefore],
      finishPic: [...imageAfter, ...videoAfter],
      discoverer: Number(userInfo.userId),
      discovererName: userInfo.name,
    }
  }
}

const onUserConfirm = ({selectedValues, selectedOptions}) => {
  if (dealStatus.value === '2') {
    // 立即处置时选择的是审核人
    form.value.auditer = selectedOptions[0].value;
    form.value.auditerName = selectedOptions[0].text;
  } else {
    // 不处置时选择的是接收人
    form.value.manager = selectedOptions[0].value;
    form.value.managerName = selectedOptions[0].text;
  }
  selectShow.value.user = false;
};
// 选择器 设备
const onDeviceConfirm = (list) => {
  console.log('onDeviceConfirm', list);
  form.value.relatedEquipment = list.map(e => ({
    id: e.value,
    name: e.name,
  }));
}

const getUsersList = () => {
  apiUsersList({
    pageNumber: 1,
    pageSize: 10000
  }).then(res => {
    assignedList.value = res.records.map(n => ({
      text: n.name,
      value: n.userId
    }));
  })
};
// 获取数据 设备
const getDevicesList = () => {
  apiDevicesList({
    projectItemId: props.detail.projectItemId
  }).then(res => {
    devicesList.value = res.map(n => ({
      name: n.deviceName,
      value: n.deviceItemId,
      text: `${n.deviceName}-${n.sensorNo || ''}`,
    }));
  })
}
// 初始化按钮状态
const initLoading = () => {
  loading.value = false;
}

getUsersList();
getDevicesList();

defineExpose({
  initLoading,
})
</script>

<style lang="scss" scoped>
@import '@/assets/universal-detail.scss';
@import '@/assets/patrolInspect.scss';
</style>